<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-card class="login_form">
          <h1>欢迎登录</h1>
          <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
            <el-form-item label="账号" prop="userId">
              <el-input
                  v-model="loginForm.userId"
                  clearable
                  placeholder="请输入您的账号"
                  size="large"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                  type="password"
                  show-password
                  v-model="loginForm.password"
                  size="large"
                  placeholder="请输入您的密码"
                  clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form-item>
            <div class="button-container">
              <el-button
                  :loading="loading"
                  class="login_btn"
                  type="primary"
                  size="default"
                  @click="login"
              >登录
              </el-button>
              <div class="spacer"></div>
              <el-button
                  class="extra_btn"
                  type="primary"
                  size="default"
                  @click="router.push('/register')"
              >去注册
              </el-button>
            </div><el-icon @click="remind = !remind" size="20"><Search /></el-icon>默认密码
            <div v-if="remind">: 12345678 登录成功请及时修改密码</div>
          </el-form-item>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Login">
import {reactive, ref} from "vue";
import {useRouter,useRoute} from "vue-router";
let route = useRoute()
import { getTime } from '@/utils/time';
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage,ElNotification } from "element-plus";
import useUserStore from "@/store/modules/user";
const remind = ref(false)
const router = useRouter();
let useStore = useUserStore()
const loginForm = reactive({
  userId: "1111",
  password: "11111111"
});
const rules = {
  userId: [
    {required: true, message: "请输入账号", trigger: "blur"},
    {min: 4, message: "账号长度不能少于4位", trigger: "blur"}
  ],
  password: [
    {required: true, message: "请输入密码", trigger: "blur"},
    {min: 8, message: "密码长度不能少于8位", trigger: "blur"}
  ]
};
const loginFormRef = ref(null);

let loading = ref(false)
const login =  () => {
  loginFormRef.value.validate( async (valid: Boolean) => {
    if (valid){
      try {
      await useStore.userLogin(loginForm)
      let redirect: string = route.query.redirect as string
      router.push({ path: redirect || '/' })
      router.push('/')
      ElNotification({
        type: 'success',
        message: '登陆成功',
        title: `Hi, ${getTime()}好`,
      })
      loading.value = false
      } catch (error) {
        loading.value = false
        ElNotification({
          type: 'error',
          message: (error as Error).message,
        })
      }
    }
  });
}

</script>


<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
  position: fixed;
  .login_form {
    position: relative;
    width: 55%;
    top: 25vh;
    left: 10vw;
    padding: 10px;
    background: transparent;
    h1 {
      background: linear-gradient(to right, blue, rgb(35, 60, 70));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 40px;
      text-align: center;
      font-weight: 700;
      margin-bottom: 40px;
      margin-top: -10px;
    }
    .button-container {
      display: flex;
        width: 100%;
    }

    .login_btn, .extra_btn {
      flex: 1;
    }

    .spacer {
      width: 10px; /* 设置间隔宽度 */
    }
  }
}
.el-card {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>